<template>
    <div class="sm-sman-topLeftTable">
        <el-table
            ref="smStTopTable"
            size="mini"
            :data="resData"
            style="width: 100%"
            height="220"
            highlight-current-row
            @current-change="tableCurrentChange"
            >
            <el-table-column type="index" label="序号" width="50"> </el-table-column>
            <el-table-column prop="productCode" label="机型" width="110" :show-overflow-tooltip="true"> </el-table-column>
            <el-table-column prop="batchNo" label="批次" :show-overflow-tooltip="true" > </el-table-column>
            <el-table-column prop="startPlaneNo" label="起始架次" :show-overflow-tooltip="true"> </el-table-column>
            <el-table-column prop="endPlaneNo" label="结束架次" :show-overflow-tooltip="true"> </el-table-column>
            <el-table-column prop="packageCode" label="工作包编号" width="150" :show-overflow-tooltip="true"> </el-table-column>
            <el-table-column prop="packageName" label="工作包名称" width="150"  :show-overflow-tooltip="true"> </el-table-column>
            <el-table-column prop="requiredTime" label="要求时间" width="150" :show-overflow-tooltip="true"> </el-table-column>
            <el-table-column prop="remark" label="备注" :show-overflow-tooltip="true"> </el-table-column>
        </el-table>
            <!-- 分页 -->
        <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="pageNumber"
            :page-sizes="[10,20,50,100]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="totalCount">
        </el-pagination>
    </div>
</template>
<script>
import { supportingIpTaskTop } from "@/utils/api.js";
export default {
    name:"SpmTopTable",
    data(){
        return{
             // 当前页数
            pageNumber: 1,
            // 数据总个数
            totalCount: 0,
            // 返回的数据数组
            resData: [],
            // 每页数据个数
            pageSize: 20,
            // 确认列表高亮参数
            stableIndex: 0,
            // 储存单选数据信息
            currentRow:''

        }
    },
    methods:{
        // 单选
        tableCurrentChange(val) {
            this.currentRow = val;
            // TOP左传TOp右参数进行数据查询
            this.$bus.$emit('smSmnDoTopLeftToRight',val.msTaskPackageId)
        },
        // 勾选
        handleSelectionChange(val){
            console.log('勾选',val)
        },
       // 分页---每页数据条数---传给TopSearch
        handleSizeChange(val){
            this.pageSize = val;
            supportingIpTaskTop({
                searchParams:{

                },
                pageParameter: {
                rows: this.pageSize,
                page: this.pageNumber,
                },
            }).then((res) => {
                console.log('分拣管理TopLeft表',res)
                this.resData = res.data.responseBody.result;
                this.totalCount = res.data.responseBody.pageParameter.totalCount;
            });
        },
        // 分页---页数---传给TopSearch
        handleCurrentChange(val) {
            this.pageNumber = val;
                supportingIpTaskTop({
                    searchParams:{

                },
                pageParameter: {
                rows: this.pageSize,
                page: this.pageNumber,
                },
            }).then((res) => {
                console.log('分拣管理TopLeft表',res)
                this.resData = res.data.responseBody.result;
                this.totalCount = res.data.responseBody.pageParameter.totalCount;
            });
        },
        searchData(){
            supportingIpTaskTop({
                searchParams:{

                },
                pageParameter: {
                rows: this.pageSize,
                page: this.pageNumber,
                },
            }).then((res) => {
                console.log('分拣管理TopLeft表',res)
                this.resData = res.data.responseBody.result;
                this.totalCount = res.data.responseBody.pageParameter.totalCount;
            });
        }
    },
    mounted() {
        this.$options.methods.searchData.bind(this)()
        // 分拣台管理刷新工作包任务列表
        this.$bus.$on('sortManDoGzbsmData',(e)=>{
            this.$options.methods.searchData.bind(this)()
        })
  }
}
</script>
<style scoped>
.sm-sman-topLeftTable {
    text-align: center;
}
</style>